<template>
    <div>
        <el-dialog
            :model-value="true"
            width="900px"
            :show-close="false"
            :close-on-click-modal="false"
        >
            <template #title>
                <div class="dialog-header">
                    意见反馈
                    <el-icon class="iconfont" @click="emit('on-close', false)"><Close /></el-icon>
                </div>
            </template>
            <div class="feedback-detail">
                <el-form ref="ruleFormRef" :model="result" :rules="rules" label-width="90px">
                    <el-form-item label="反馈类型" prop="feedbackType">
                        <el-select
                            v-model="result.feedbackType"
                            class="srt-select w304"
                            popper-class="srt-select-popper"
                            placeholder="请选择意见类型"
                            size="large"
                        >
                            <el-option
                                v-for="item in feedbackTypeList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="反馈描述" prop="description">
                        <el-input
                            resize="none"
                            class="srt-el-input"
                            :rows="4"
                            maxlength="500"
                            show-word-limit
                            type="textarea"
                            placeholder="请您详细描述，以保证管理员及时准确判断并处理您的反馈"
                            v-model="result.description"
                        />
                    </el-form-item>
                    <el-form-item label="上传图片">
                        <div>
                            <div class="uploader-box">
                                <template v-if="result.attUrls.length > 0">
                                    <div
                                        class="uploader-img-box"
                                        v-for="(item, index) in result.attUrls"
                                        :key="item"
                                    >
                                        <el-image
                                            class="uploader-img"
                                            :src="item.materialUrl"
                                            :zoom-rate="1.2"
                                            :preview-src-list="previewUrl"
                                            :initial-index="index"
                                            fit="cover"
                                        />
                                        <span
                                            class="iconfont icon-guanbi1"
                                            @click="delMaterial(item.materialUrl)"
                                        ></span>
                                    </div>
                                </template>

                                <Uploader
                                    v-if="result.attUrls.length < 9"
                                    :acceptTypes="['jpg', 'png', 'jpeg']"
                                    :acceptSize="5 * 1024 * 1024"
                                    @on-success="uploadSuccess"
                                    @on-error="uploadError"
                                >
                                    <div
                                        class="uploader-btn"
                                        :class="{ mt18: result.attUrls.length >= 6 }"
                                    >
                                        <!-- <i class="icon-a-tianjiahuodongfengmian1x iconfont"></i> -->
                                        <el-icon class="uploader-icon"><Plus /></el-icon>
                                        <p class="mt10">添加图片</p>
                                    </div>
                                </Uploader>
                            </div>

                            <p class="upload-tips">
                                支持 png .jpg.jpeg；单个图片大小不超过5MB；最多支持上传9张照片
                            </p>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <template #footer>
                <el-button
                    class="srt-el-button srt-el-button--cancel srt-el-button-h36 w76"
                    @click="emit('on-close', false)"
                >
                    取消
                </el-button>
                <el-button
                    class="srt-el-button srt-el-button--primary srt-el-button-h36 w76"
                    @click="submit"
                    :loading="loading"
                >
                    确定
                </el-button>
            </template>
        </el-dialog>
    </div>
</template>
<script setup>
import { ref, computed, reactive } from 'vue';
import { useStore } from 'vuex';
import Message from '@/components/message/message.js';

const emit = defineEmits(['on-close']);
const store = useStore();
const loading = ref(false);

const result = ref({
    feedbackType: null,
    attUrls: [],
    description: ''
});
const feedbackTypeList = ref([
    { id: 1, name: '使用情况' },
    { id: 2, name: '产品建议' },
    { id: 0, name: '其他' }
]);

const ruleFormRef = ref(null);

const previewUrl = computed(() => {
    return result.value.attUrls.map(item => item.materialUrl);
});

function descriptionValidator(rule, value, callback) {
    if (!value || value.trim().length == 0) {
        callback(new Error('请填写意反馈描述'));
    }
    callback();
}

const rules = reactive({
    feedbackType: [
        {
            required: true,
            message: '请选择反馈类型',
            trigger: 'change'
        }
    ],
    description: [
        { required: true, trigger: 'blur', message: '请填写意反馈描述' },
        { validator: descriptionValidator, trigger: 'blur' }
    ]
});
function updateFileList(val) {
    console.log('updateFileList', val);
}

function uploadSuccess(data) {
    loading.value = true;
    setTimeout(() => {
        loading.value = false;
    }, 500);

    if (result.value.attUrls.length >= 9) {
        Message({ text: '最多只能添加9张图片', type: 'error' });

        return false;
    }
    result.value.attUrls.push({
        materialUrl: data.host + '/' + data.url
    });
    // result.value.img.push(res.data.previewUrl);
}

function delMaterial(url) {
    result.value.attUrls = result.value.attUrls.filter(item => item.materialUrl != url);
}

function submit() {
    ruleFormRef.value.validate(valid => {
        if (valid) {
            loading.value = true;
            G_transmit('feedbackSave', {
                data: {
                    ...result.value
                }
            })
                .then(() => {
                    G_dispatchEvent('toast', {
                        message: '提交成功',
                        type: 'success'
                    });
                    emit('on-close', false);
                })
                .finally(() => {
                    loading.value = false;
                });
        } else {
            console.log('error submit!');
            return false;
        }
    });
}

function uploadError(err) {
    const errType = {
        1002: '图片尺寸超出范围',
        1001: '不符合图片要求'
    };
    const errText = errType[err.code] || '上传失败';

    Message({ text: errText, type: 'error' });
}
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
    border-radius: 4px;
}
:deep(.el-dialog__header) {
    padding: 0;
    margin: 0;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    font-weight: bold;
    color: #000000;
    font-size: 16px;
    border-bottom: 1px solid #e0e2e4;
}
:deep(.el-dialog__body) {
    padding: 20px;
}
:deep(.el-form-item__label) {
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 14px;
    padding-right: 20px;
}
.w304 {
    width: 304px;
}
.srt-el-input {
    height: 150px;
    :deep(.el-textarea__inner) {
        height: 100%;
    }
}
.uploader-btn {
    width: 106px;
    height: 106px;
    border-radius: 4px;
    border: 1px solid #b2dafc;
    font-size: 14px;
    color: #0084f6;
    display: flex;
    flex-direction: column;
    line-height: 14px;
    align-items: center;
    padding-top: 38px;
}
.upload-tips {
    font-size: 14px;
    font-family: MicrosoftYaHei;
    color: #999999;
    line-height: 22px;
    margin-top: 5px;
}
.uploader-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 1;
    .uploader-img {
        width: 106px;
        height: 106px;
        border-radius: 4px;
    }
}
.mt10 {
    margin-top: 10px;
}
.w76 {
    width: 76px;
}
:deep(.el-textarea__inner) {
    color: #000;
}
.uploader-img-box {
    position: relative;
    margin-right: 20px;

    .icon-guanbi1 {
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(50%, -70%);
        font-size: 15px;
        line-height: 15px;
        color: #f55656;
        cursor: pointer;
    }
    &:nth-child(n + 7) {
        margin-top: 18px;
    }
}
.srt-select {
    :deep(.el-input__wrapper) {
        input::-webkit-input-placeholder {
            color: #ccc !important;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: #ccc !important;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */

            color: #ccc !important;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */

            color: #ccc !important;
        }
    }
}
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .iconfont {
        font-size: 24px;
        color: #222;
        cursor: pointer;
        font-weight: 400;
    }
}
:deep(.el-overlay) {
    z-index: 999999;
}
.mt18 {
    margin-top: 18px;
}
.uploader-icon{
    font-size: 20px;
    font-weight: bold;
}
</style>
